<{include file="public/header.html"}>
<script type="text/javascript" src="<{$smarty.const.STATIC_COMPONENT_URL}>js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBP5W4f9GW08Ag5kpEX-TAin0_4B8YWe-g&sensor=false"></script>
<script type="text/javascript">
	var map;
	var infowindow;
	var marker;
	
	var geocoder = new google.maps.Geocoder();
		function initialize() {
			var geocoder = new google.maps.Geocoder();
			var myOptions = {
				zoom: 8,
				mapTypeId: google.maps.MapTypeId.ROADMAP
		   };
		   //assign map to div
		   map = new google.maps.Map(document.getElementById("map-content"),
		       myOptions);
		 	// Try HTML5 geolocation
			if(navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(function(position) {
		        var pos = new google.maps.LatLng(position.coords.latitude,
		                                         position.coords.longitude);
		
		        map.setCenter(pos);
		      },function() {
		    	  handleNoGeolocation(true);
		      });
		    }else {
		    	// Browser doesn't support Geolocation
		    	handleNoGeolocation(false);
		    }
			
		}//end init
		
		function handleNoGeolocation(errorFlag) {
		  if (errorFlag) {
		    var content = 'Error: The Geolocation service failed.';
		  } else {
		    var content = 'Error: Your browser doesn\'t support geolocation.';
		  }
		
		  var options = {
		    map: map,
		    position: new google.maps.LatLng(60, 105),
		    content: content
		  };
		
		  var infowindow = new google.maps.InfoWindow(options);
		  map.setCenter(options.position);
		}
		
		function searchLocations() {
		     var address = document.getElementById('address').value;
		     geocoder.geocode({'address': address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
				    if (results[0]) {
				    	searchLocationsNear(results[0].geometry.location)
				    }
				} else {
					  alert("Geocoder failed due to: " + status);
				}
			});
		}
		function searchLocationsNear(center) {
			var param = 'lat='+center.lat()+'&lng='+center.lng();
			$.ajax({
				type : 'post',
				data : param,
				url : '<{$smarty.const.APPLICATION_URL}>/garage/getmarker',
				success : function(data){
					var markers = eval('(' + data + ')');
					
					for(var i = 0; i < markers.length; i++){
						var myLatLng = new google.maps.LatLng(markers[i].lat, markers[i].lng);
						marker = new google.maps.Marker({
							position: myLatLng,
						    map: map
						});
						var content = 'Title : '+markers[i].title+'<br/>';
						content += 'Category : '+markers[i].category+'<br/>';
						content += 'Website : '+markers[i].link+'<br/>';
						content += 'Price/m2 : '+markers[i].m2+' USD<br/>';
						content += 'Price/meter : '+markers[i].meter+' USD<br/>';
						content += 'Price/spot : '+markers[i].spot+' USD<br/>';
						openInfoWindow(marker, content);
					}
				}
			});
		}
		function openInfoWindow(marker, content){
			var window = new google.maps.InfoWindow(
				{ content: content,
				  size: new google.maps.Size(50,50)
			});
			google.maps.event.addListener(marker, 'click', function() {
			  window.open(map, marker);
			});
		}
		
	      
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="container">
    	<div class="category">
        	<div class="cat-title"><span>SEARCH BY CATEGORY</span></div>
            <ul>
            <{while $category->fetch()}>
            	<li><a href="<{$smarty.const.APPLICATION_URL}>/garage/search/category/<{$category->id}>"><{$category->name}></a></li>
            <{/while}>
            </ul>
        </div><!--end category-->
        <div class="map">
        	<div class="map-title"><span>SEARCH BY LOCATION</span></div>
        	<div class="map-search">
        		<form action="" method="post">
        			<div class="row">
        				<input type="text" name="address" id="address" />
        				<a onclick="searchLocations();"><img src="<{$smarty.const.STATIC_COMPONENT_URL}>images/btnFind.jpg" /></a>
        			</div>
        		</form>
        	</div>
        	<div id="map-content" style="width:404px; height:350px" ></div>
        </div><!--end map-->
        <div class="ad">
        	<h2>Advertiser</h2>
        	<{assign var=i value=1}>
        	<{while $garage->fetch()}>
            <div class="ad-item <{if $i mod 2 == 1}>right<{/if}>">  
                <img src="<{$smarty.const.STATIC_COMPONENT_URL}>images/ad.jpg" />  
                <div class="ad-desc">  
                    <p class="ad-desc-content">The pack, the basic...</p>  
                </div>  
            </div>
            <{assign var=i value=$i+1}>
            <{/while}> 
        </div><!--end ad-->
    </div><!--end container-->
    <div class="clear"></div>
<{include file="public/footer.html"}>